<template>
  <div>
    <el-card>
      <template #header>
        <span class="header-text">作业范围</span>
        <div v-if="isEdit">
          <el-button type="primary" @click="submit">提交</el-button>
          <el-button @click="cancel">取消</el-button>
        </div>
        <el-button v-else type="primary" @click="edit">编辑</el-button>
      </template>
      <div class="work-map">
        <span style="font-size:14px">地区关键词：</span>
        <el-input v-model="searchArea" placeholder="请输入地区关键词" style="width:230px" /> <br>
        <div v-if="isPaint" style="margin-top:12px">
          <el-button type="primary" @click="complete">完成绘制</el-button>
          <el-button>删除围栏</el-button>
        </div>
        <div v-if="(isEdit || isPaint) && !(isEdit && isPaint)">
          <el-button
            type="primary"
            style="margin-top:12px"
            @click="painting"
          >开始绘制</el-button>
          <el-alert
            title="点击或拖动鼠标绘制作业范围，右击鼠标结束图形绘制，图形不可有交叉点。完成绘制后，点击提交按钮保存。每个机构仅可支持绘制一个作业范围"
            type="warning"
            show-icon
          />
        </div>
        <baidu-map
          style="height:700px"
          class="bdMap"
          :center="center"
          :zoom="zoom"
          scroll-wheel-zoom
        >

          <bm-polygon
            :path="polygon"
            stroke-color="pink"
            :stroke-opacity="0.5"
            :stroke-weight="2"
            stroke-style="dashed"
            fill-color="pink"
            :editing="isPaint"
            @lineupdate="updatePolygonPath"
          />
          <bm-local-search :auto-viewport="true" :keyword="searchArea" />
        </baidu-map>
      </div>
    </el-card>
  </div>
</template>

<script>
import { editMap } from '@/api/ogization'

export default {
  data() {
    return {
      searchArea: '',
      center: { lng: 0, lat: 0 },
      zoom: 10,
      polygon: [],
      isEdit: false,
      isPaint: false,
      mapInfo: {}
    }
  },
  methods: {
    // initMap(mapInfo) {
    //   BMPGL('UNnu0yGtkhcA2utPAGG8EqpG18yr32fb').then((BMapGL) => {
    //     // 创建地图实例
    //     const map = new BMapGL.Map('bdMap')
    //     // 创建点坐标 axios => res 获取的初始化定位坐标
    //     // console.log(typeof mapInfo)
    //     let point
    //     if (typeof mapInfo === 'string') {
    //       point = mapInfo
    //     } else {
    //       point = new BMapGL.Point(mapInfo.longitude, mapInfo.latitude)
    //     }
    //     // 初始化地图，设置中心点坐标和地图级别
    //     map.centerAndZoom(point, 10)
    //     map.setHeading(10)
    //     map.setTilt(10)
    //     map.enableScrollWheelZoom(true)
    //     // 地图覆盖
    //     if (mapInfo.polygon) {
    //       const viewPort = mapInfo.polygon.map(item => new BMapGL.Point(item.longitude, item.latitude))
    //       const polygon = new BMapGL.Polygon(
    //         viewPort
    //         , { strokeColor: 'pink', strokeWeight: 1, strokeOpacity: 0.5, fillOpacity: 0.5, fillColor: 'pink' })
    //       map.addOverlay(polygon)
    //       map.setViewport(viewPort)
    //     }
    //   })
    //     .catch((err) => {
    //       console.log(err)
    //     })
    // },
    initMap(mapInfo) {
      this.mapInfo = mapInfo
      this.center.lng = mapInfo.longitude
      this.center.lat = mapInfo.latitude
      this.zoom = 10
      if (mapInfo.polygon) {
        this.polygon = mapInfo.polygon.map(item => ({ lng: item.longitude, lat: item.latitude }))
      } else {
        this.polygon = []
      }
    },
    edit() {
      this.isEdit = true
    },
    cancel() {
      this.isEdit = false
      this.isPaint = false
    },
    painting() {
      this.isPaint = true
    },
    complete() {
      this.isPaint = false
    },
    updatePolygonPath(e) {
      this.polygon = e.target.getPath()
    },
    async submit() {
      const polygon = this.polygon.map(item => ({ latitude: item.lat, longitude: item.lng }))
      const { bid, type } = this.mapInfo
      await editMap({ polygon, bid: +bid, type })
      this.$message.success('修改成功')
      this.cancel()
    }
  }
}
</script>

<style lang="scss" scoped>
.bdMap{
  box-sizing: border-box;
  margin-top: 15px;
  width: 100%;
  min-height: 700px;
  // height: 100%;
  z-index: 100;
}
.el-card{
  margin: 12px;
     ::v-deep .el-card__header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 60px;
        background-color: #f8faff;
        .header-text{
          font-size: 16px;
          font-weight: 700;
          color: #2a2929;
        }
      }
    }
::v-deep .BMap_vectex{
  background-image: none;
  width: 6px;
  height: 6px;
  background-color: red;
  border-radius: 50%;
  text-align: center;
}
</style>
